<script setup lang="ts">
import { ref } from 'vue';

const data = ref([1,2,3,4,5,6,7,8])
</script>

<template>
    <div class="wrap">
        <div class="container">
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
            <div class="item">4</div>
            <div class="item">5</div>
        </div>

        <div class="container-2">
            <div class="item-2" v-for="item in data" :key="item">
            </div>
        </div>
    </div>
    
</template>

<style scoped>
.wrap {
    width: 100%;
    height: calc(100vh - 100px);
    overflow-y: scroll;
}
.container {
    display: grid;
    width: 100%;
    height: 200px;
    grid-template-rows: 1fr 1fr;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-areas: 'a . .' 'a . .';
    grid-gap: 10px;
}
.item {
    border: solid 1px #fff;
}
.item:first-child {
    grid-area: a;
}
.container-2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    grid-gap: 10px;
}
.item-2 {
     width: 100%;
    padding-bottom: calc(70%);
    max-height: 140px;
    position: relative;
    border: solid 1px #fff;
    background-color: rgba(0,0,0,0.1);
    background-image: url('../../assets/test.png');
    background-size: 100% 100%;
}
</style>